import { getT } from '@/app/i18n'
import Image from 'next/image'

export default async function CommunityPostPage({ params }: { params: Promise<{ lng: string; id: string }> }) {
  const { t } = await getT('translation')
  const { id, lng } = await params
  
  // 模拟数据 - 实际应该从API获取
  const post = {
    id,
    title: "山脉日落拍摄技巧分享 📸",
    images: [
      "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=1000&fit=crop",
      "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&h=1000&fit=crop",
      "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=800&h=1000&fit=crop",
    ],
    content: `今天分享一下我在山区拍摄日落的经验和技巧 🌄

**拍摄参数：**
📷 相机：Sony A7M4
🔭 镜头：24-70mm f/2.8
⚙️ 设置：ISO 100, f/8, 1/125s

**拍摄技巧：**

1️⃣ **黄金时刻**
日落前后30分钟是最佳拍摄时间，光线柔和，色彩丰富。建议提前到达现场踩点。

2️⃣ **构图技巧**
使用三分法构图，将地平线放在画面的三分之一处，让天空占据更多比例，突出日落的壮观。

3️⃣ **使用渐变滤镜**
使用ND渐变滤镜可以平衡天空和地面的曝光差异，让照片更加自然。

4️⃣ **后期调色**
适当降低高光，提升阴影，增加橙色和紫色的饱和度，让日落更加梦幻。

希望对大家有帮助！有问题欢迎评论区交流 💬`,
    author: {
      name: "摄影师小明",
      avatar: "https://ui-avatars.com/api/?name=小明&background=6366f1&color=fff",
      bio: "风光摄影师 | Sony Ambassador",
    },
    stats: {
      likes: 1284,
      comments: 156,
      shares: 89,
      views: 12453,
    },
    device: "Sony A7M4",
    tags: ["风光摄影", "日落", "摄影技巧", "后期调色"],
    createdAt: "2024-11-05",
  }
  
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50/30 to-purple-50/30 dark:from-gray-950 dark:via-blue-950/20 dark:to-purple-950/20">
      <main className="mx-auto max-w-4xl px-4 py-8">
        {/* 返回按钮 */}
        <a
          href={`/${lng}`}
          className="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors mb-6"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
          返回首页
        </a>

        <div className="bg-white dark:bg-gray-900 rounded-3xl shadow-xl overflow-hidden">
          {/* 作者信息 */}
          <div className="p-6 border-b border-gray-100 dark:border-gray-800">
            <div className="flex items-center gap-4">
              <Image
                src={post.author.avatar}
                alt={post.author.name}
                width={56}
                height={56}
                className="w-14 h-14 rounded-full"
              />
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {post.author.name}
                </h3>
                <p className="text-sm text-gray-500 dark:text-gray-400">{post.author.bio}</p>
              </div>
              <button className="px-6 py-2 rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 text-white text-sm font-semibold hover:shadow-lg transition-all">
                关注
              </button>
            </div>
          </div>

          {/* 标题 */}
          <div className="px-6 pt-6">
            <h1 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-4">
              {post.title}
            </h1>
          </div>

          {/* 图片网格 */}
          <div className="px-6 py-4">
            <div className="grid gap-3">
              {post.images.map((img, index) => (
                <div key={index} className="relative rounded-2xl overflow-hidden bg-gray-100">
                  <Image
                    src={img}
                    alt={`${post.title} - 图片 ${index + 1}`}
                    width={800}
                    height={1000}
                    className="w-full h-auto"
                  />
                </div>
              ))}
            </div>
          </div>

          {/* 正文内容 */}
          <div className="px-6 py-4">
            <div className="prose prose-sm max-w-none dark:prose-invert">
              <div className="whitespace-pre-wrap text-gray-700 dark:text-gray-300 leading-relaxed">
                {post.content}
              </div>
            </div>
          </div>

          {/* 标签 */}
          <div className="px-6 py-4 flex flex-wrap gap-2">
            {post.tags.map((tag) => (
              <span
                key={tag}
                className="px-3 py-1.5 rounded-full bg-blue-50 text-blue-600 text-sm font-medium dark:bg-blue-900/20 dark:text-blue-400"
              >
                #{tag}
              </span>
            ))}
          </div>

          {/* 互动数据 */}
          <div className="px-6 py-4 border-t border-gray-100 dark:border-gray-800">
            <div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
              <span>{post.createdAt}</span>
              <span>{post.stats.views.toLocaleString()} 浏览</span>
            </div>
          </div>

          {/* 互动按钮 */}
          <div className="px-6 py-4 border-t border-gray-100 dark:border-gray-800 flex items-center gap-4">
            <button className="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors">
              <span className="text-xl">❤️</span>
              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                {post.stats.likes}
              </span>
            </button>
            <button className="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors">
              <span className="text-xl">💬</span>
              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                {post.stats.comments}
              </span>
            </button>
            <button className="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors">
              <span className="text-xl">⭐</span>
              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">收藏</span>
            </button>
            <button className="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors">
              <span className="text-xl">🔗</span>
              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">分享</span>
            </button>
          </div>

          {/* 评论区 */}
          <div className="px-6 py-6 border-t border-gray-100 dark:border-gray-800">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
              评论 {post.stats.comments}
            </h3>
            <div className="space-y-4">
              <div className="flex gap-3">
                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex-shrink-0" />
                <div className="flex-1">
                  <input
                    type="text"
                    placeholder="写下你的评论..."
                    className="w-full px-4 py-3 rounded-xl bg-gray-50 dark:bg-gray-800 border-0 focus:outline-none focus:ring-2 focus:ring-blue-500/30 text-sm"
                  />
                </div>
              </div>
              
              {/* 示例评论 */}
              <div className="space-y-3 mt-6">
                <div className="flex gap-3">
                  <div className="w-10 h-10 rounded-full bg-gradient-to-br from-green-500 to-teal-600 flex-shrink-0" />
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <span className="text-sm font-medium text-gray-900 dark:text-white">摄影爱好者</span>
                      <span className="text-xs text-gray-500">2小时前</span>
                    </div>
                    <p className="text-sm text-gray-700 dark:text-gray-300">
                      太实用了！正好最近想拍日落，学习了 🙏
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}
